<template>
  <div>
    <header>
      <span class="logo">logo</span>
      <span>用户名：{{ userInfo.userName }}</span>
      <span @click="logout">退出</span>
    </header>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

import { onMounted, ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();

const userInfo = ref({});
const logout = () => {
  store.commit("logout");
  // window.location.href = "/login";

  router.push({
    path: "/login",
  });
};
onMounted(() => {
  console.log("state.userInfo=========", store.state.userInfo);

  userInfo.value = store.state.userInfo;
  console.log("state.userInfo=========", userInfo.value.userName);
});
</script>

<style lang="scss" scoped>
header {
  background-color: #282c34;
  color: white;
}
</style>
